<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--
       viewport表示用户是否可以缩放页面；
       width指定视区的逻辑宽度；
       device-width指示视区宽度应为设备的屏幕宽度；
       initial-scale指令用于设置Web页面的初始缩放比例
       initial-scale=1则将显示未经缩放的Web文档
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <title>登陆</title>
    <style>
        * {

            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            background-image: url(../static/img/background.png);
            height: 100%;
        }

        a
        p {
            margin-top: 30px;
            margin-left: 20px;
            color: #0d041d;
        }

        input {
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            height: 30px;
            width: 140px;
            background-color: rgba(245, 15, 141, 0);
            outline: none;
            color: #b3b1b5;
            padding-left: 10px;
        }

        .loginDiv {
            height: 250px;
            width: 350px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        .input-button {
            justify-content: center;
        }

    </style>
</head>

<body>

<div class="panel panel-default loginDiv">
    <form action="/userLogin" method="post">
        <div >
        <h3 style="text-align: center;color: #0d041d;">用户登陆</h3>
        <p>账号：<input name="username" style="background-color: #eceaee"></p>
        <p>密码：<input name="password" type="password" style="background-color: #eceaee"></p>
        <p>记住密码：<input type="checkbox" name="isSaved"></p>
        </div>
        <div class="input-button">
            <button type="submit" class="btn btn-default" data-toggle="modal"
                    data-whatever="文件">登录
            </button>
            <button type="reset" class="btn btn-default" data-toggle="modal"
                    data-whatever="文件">重置
            </button>
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#exampleModal"
                    data-whatever="文件">注册
            </button>
        </div>
    </form>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">New message</h4>
                </div>
                <div class="modal-body">
                    <form action="/register" method="post">
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">用户名:</label>
                            <input type="text" class="form-control" name="register-name">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">密码:</label>
                            <input type="password" class="form-control" name="register-password">
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-primary" >确认</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../static/JS/axios.js"></script>
<script src="../static/JS/jquary.js"></script>
<script src="../static/JS/bootstrap.js"></script>
<script>
    $('#exampleModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        var recipient = button.data('whatever') // Extract info from data-* attributes
        // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
        // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
        var modal = $(this)
        modal.find('.modal-title').text('新用户注册')
    })
</script>
</body>
</html>

